<template>
	<view class="SongSheet">
		<u-navbar title="歌单" back-icon-color="#fff" :background="background" title-color="#fff"></u-navbar>
		<view class="u-page">
			<view class="SongSheetList">
				<view class="item" v-for="item in songSheetList" :key="item.imgUrl" @click="goNextPage(item)">
					<view class="img">
						<image :src="item.imgUrl" class="image" mode="widthFix"></image>
					</view>
					<view class="title">
						{{item.sheetName}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				background: {},
				textColor: "",
				songSheetList: []
			}
		},
		computed: {
			...mapState({
				list:({config})=>config.tabBarList,
				commonColor: ({config})=>config.commonColor,
			})
		},
		methods: {
			goNextPage(item) {
				this.$Router.push({
					name: "songSheetItem",
					params: item,
				})
			}
		},
		created() {
			this.background["backgroundColor"] = this.commonColor;
			this.textColor= this.commonColor;
			this.$http.post("/querySongSheet.htm").then(res => {
				if(res.result.length) {
					let songSheetList = res.result;
					songSheetList.filter((item, index) => {
						item["imgUrl"] = `/static/img/songSheep${index+1}.jpg`;
					})
					this.songSheetList = songSheetList;
				}
			})
		}
	}
</script>

<style lang="less" scoped>
.SongSheet {
	display: flex;
	flex-direction: column;
	height: 100%;
	.u-page {
		flex: 1;
		overflow: hidden;
		padding: 20rpx;
		.SongSheetList {
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;
			.item {
				width: 50%;
				padding: 20rpx;
				.img {
					width: 100%;
					.image {
						width: 100%;
						border-radius: 10rpx;
					}
				}
				.title {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					display: -webkit-box;
					display: box;
				}
			}
		}
	}
}
</style>
